1. 什麼是 DOM？

DOM (Document Object Model) 就是 把 HTML 文件轉換成 JavaScript 可以操作的物件。
簡單來說，透過 DOM，我們就可以用 JavaScript 改變網頁的內容、樣式、甚至新增刪除元素。
在昨天的專輯輪播程式裡，就是透過 DOM 操作來抓取元素，並且實現滑動、點擊等互動。

2. 常用 DOM 方法

• document.getElementById("id") → 找到某個元素
• document.querySelector("selector") → 用 CSS 選擇器找元素
• .innerText → 改變文字內容
• .innerHTML → 改變 HTML 內容
• .style.property → 改變 CSS 樣式
• element.addEventListener("事件", function) → 監聽事件（像是 click、mouseover）

3.程式碼範例(以昨天的程式碼為例)

• 說明:
  • document.getElementById('carouselTrack')
    → 取得 HTML 中 id="carouselTrack" 的元素，這裡就是放專輯的「軌道」。
  • document.getElementById('prevBtn') & document.getElementById('nextBtn')
    → 抓取左右兩個按鈕，之後用來監聽點擊事件。
  • document.querySelectorAll('.album-card')
    → 找到所有 class="album-card" 的元素，並且回傳一個類陣列，代表每一張專輯卡片。

4.今日心得

其實昨天在用專輯展示區的輪播功能時，我沒有很清楚，大部分是請AI生成出來的。雖然功能能跑起來，但我覺得自己對於程式碼的理解還不夠。所以今天就決定要來認識一下什麼是DOM操作，DOM就像是一棵樹，把HTML的結構轉換成JavaScript可以操作的物件，只要抓到正確的節點，就可以改變內容、樣式，甚至加入互動。
透過這次的學習，我開始能夠連結昨天用到的程式碼，理解為什麼按下箭頭按鈕時，圖片會移動，也理解了事件監聽是怎麼讓按鈕有反應的。感覺就像是昨天只是在用現成的工具，而今天才真正打開工具箱，學會裡面的工具是怎麼運作的。